<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts"
let $docLayer = null
let features = null
let Array1 = ref([])
let Array2 = ref([])
let Array3 = ref([])
let Array4 = ref([])
let Array5 = ref([])
let Array6 = ref([])

import { Query } from "../../../../utils/Query";
let service = {
  name: "guanggu",
  layerId: 2,
};
const success = (data) => {
  let format = new Zondy.Format.PolygonJSON();
  features = format.read(data);
  classifiedData()
};
Query.queryByLayer({
  service,
  success,
});
function classifiedData() {
  if (!features) {
    console.log("Features is null");
    return;
  }
  features.forEach((item) => {
    let type = item.values_.values_["事件类型"];
    if (type == "失火") {
      Array1.value.push(type);
    } else if (type == "刮擦") {
      Array2.value.push(type);
    } else if (type == "其他") {
      Array3.value.push(type);
    } else if (type == "碰撞") {
      Array4.value.push(type);
    } else if (type == "碾压") {
      Array5.value.push(type);
    } else if (type == "翻车") {
      Array6.value.push(type);
    }
  });
}
onMounted(() => {
  $docLayer = inject("$docLayer")
  setTimeout(() => {
    const a = Array1.value.length;
    const b = Array2.value.length;
    const c = Array3.value.length;
    const d = Array4.value.length;
    const e = Array5.value.length;
    const f = Array6.value.length;
    let barChart = echarts.init(document.getElementById("main"));
    barChart.setOption({
      title: {
        text: "事件类型统计",
        left: "center",
        top: "20px",
        textStyle: {
          fontSize: 20,
          color: "white"
        }
      },
      tooltip: {},
      xAxis: {
        data: [
          { value: "失火", textStyle: { color: "white" } },
          { value: "刮擦", textStyle: { color: "white" } },
          { value: "其他", textStyle: { color: "white" } },
          { value: "碰撞", textStyle: { color: "white" } },
          { value: "碾压", textStyle: { color: "white" } },
          { value: "翻车", textStyle: { color: "white" } }]
      },
      yAxis: {
        axisLabel: {
          // textStyle: {
            color: 'white' // 设置刻度数字的颜色
          // }
        }
      },
      series: [
        {
          name: "数量",
          type: "bar",
          data: [
            { value: a, itemStyle: { color: "#00ffff" } },
            { value: b, itemStyle: { color: "#00ffff" } },
            { value: c, itemStyle: { color: "#00ffff" } },
            { value: d, itemStyle: { color: "#00ffff" } },
            { value: e, itemStyle: { color: "#00ffff" } },
            { value: f, itemStyle: { color: "#00ffff" } }
          ],
        }
      ]
    });
  }, 20);
});


</script>



<style scoped>
#main {
  position: absolute;
  left: 70%;
  top: 80px;
  width: 300px;
  height: 300px;
  background-color: rgba(0, 60, 136, 0.7);
  border-radius: 30px;
}
</style>